<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="/Resources/css/public.css">
</head>

<body>
    <!---------------- 头部 ---------------->
    <div class="head">
        <div class="logo">
            <a href="javascript:;">
                <img src="/Resources/images/logo.png" alt="">
               
            </a>
            <span class='logo-text'>
                    百事通法律用户注册
                </span>
        </div>
    </div>
    <!---------------- 主要区域 ---------------->
    <div class="main">
        <div class="register-wrap w1200 box box1">
            <div class="ptitle">
                修改密码
                <span class='has-account'>
                    已有账号？
                    <a href="login.html">
                        立即登录
                    </a>
                </span>
            </div>
            <div class="line"></div>
            <div class="register-input-wrap">
                <div class="register-input-wrap-inner">
                    <div class="register-section register-section-input">
                        <div class="input-title">
                            <span class='must'>
                            *
                        </span> 用户名：
                        </div>
                        <div class="input-text">
                            <input type="value" class='borderinput'>
                        </div>
                        <div class="warn">
                            <i class='icon icon-warn-ok'></i>
                        </div>
                    </div>
                    <div class="register-section register-section-input">
                        <div class="input-title">
                            <span class='must'>
                            *
                        </span> 密码：
                        </div>
                        <div class="input-text">
                            <input type="password" class='borderinput'>
                        </div>
                        <div class="warn">
                            <i class='icon icon-warn-fail'></i> 密码不可为空
                        </div>
                    </div>
                    <div class="register-section register-section-input">
                        <div class="input-title">
                            <span class='must'>
                            *
                        </span> 确认密码：
                        </div>
                        <div class="input-text">
                            <input type="password" class='borderinput'>
                        </div>
                    </div>
                    <div class="register-section register-section-input">
                        <div class="input-title">
                            <span class='must'>
                            *
                        </span> 真实姓名：
                        </div>
                        <div class="input-text">
                            <input type="value" class='borderinput'>
                        </div>
                    </div>
                    <div class="register-section register-section-input">
                        <div class="input-title">
                            <span class='must'>
                            *
                        </span> Email：
                        </div>
                        <div class="input-text">
                            <input type="value" class='borderinput'>
                        </div>
                    </div>
                    <div class="register-section register-section-input register-section-yzm">
                        <div class="input-title">
                            <span class='must'>
                            *
                        </span>短信验证码：
                        </div>
                        <div class="input-text">
                            <input type="password">
                            <a href="javascript:;" class='bt bt-blue bt-register-yzm'>
                               发送验证码
                           </a>
                        </div>
                    </div>
                    <div class="register-section register-section-protocol">
                        <div class="input-title">
                            &nbsp;
                        </div>
                        <div class="input-text">
                            <span class='protocol-checkbox active'>
                                <i class='icon icon-checkbox'></i>
                            </span>
                            <span class='protocol-text'>
                            我已阅读并同意
                            
                            《<a href="javascript:;">百事通用户协议</a>》
                            
                        </span>
                        </div>
                    </div>
                    <div class="register-section register-section-sure">
                        <div class="input-title">
                            &nbsp;
                        </div>
                        <div class="input-text">
                            <a href="javascript:;" class='bt bt-gray'>
                               立即注册
                           </a>
                        </div>
                        <div class="note">
                            * 为必填项
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="register-bottom">
        <a href="javascript:;">
            关于我们
        </a>
        <a href="javascript:;" class='mar0'>
            法律声明
        </a>
    </div>
</body>
<script src="/Resources/js/jquery.min.js"></script>
<script>
// 点击切换复选框背景色
$(document).on('click', '.protocol-checkbox', function() {
    $(this).toggleClass('active')
})
// 验证码
var fn_yzm = function(sign, aim) {
    var sign = 1;
    $(document).on('click', aim, function() {
        if (sign == 1) {
            sign = 0;
            var num = 30;
            var that = $(this)
            $(this).css('background', '#c8cbcf')
            $(this).html('重新获取（' + num + '）S')
            var timer = setInterval(function() {
                num--;
                if (num == 0) {
                    sign = 1;
                    clearInterval(timer);
                    that.css('background', '#6aa1e6')
                    that.html('获取验证码')
                } else {
                    sign = 0
                    that.css('background', '#c8cbcf')
                    that.html('重新获取（' + num + '）S')
                }
            }, 1000)

        }
    })
}
fn_yzm('flag_register', '.bt-register-yzm')
</script>

</html>